<template>
  <div>
    <!-- 基本信息区 -->
    <div class="w">
      <div class="title-area">
        <span style="font-weight: 600;">{{ record.firmName }}</span>
      </div>
      <div class="content-area" style="padding-top: 15px;">
          <Row>
              <Col :span="4" :offset="0"><div style="padding-right: 15px; text-align: right;">入库时间：</div></Col>
              <Col :span="16"><div>{{ record.updateTime }}</div></Col>
          </Row>
      </div>
    </div>

    <!-- 厂商信息区 -->
    <div class="w" style="margin-top: 5px;">
      <div class="title-area">
        <span>厂商信息</span>
      </div>
      <div class="content-area">
        <Row class="info-row" style="padding-top: 15px;">
            <Col :span="4" :offset="0"><div style="padding-right: 15px; text-align: right;">厂商地址：</div></Col>
            <Col :span="16"><div>{{ record.address }}</div></Col>
        </Row>
        <Row class="info-row">
            <Col :span="4" :offset="0"><div style="padding-right: 15px; text-align: right;">联系人：</div></Col>
            <Col :span="16"><div>{{ record.linkMan }}</div></Col>
        </Row>
        <Row class="info-row">
            <Col :span="4" :offset="0"><div style="padding-right: 15px; text-align: right;">联系电话：</div></Col>
            <Col :span="16"><div>{{ record.linkPhone }}</div></Col>
        </Row>
        <Row>
            <Col :span="4" :offset="0"><div style="padding-right: 15px; text-align: right;">是否信创目录内企业：</div></Col>
            <Col :span="16">
              <div>
                <Switcher :modelValue="record.isInCatalog" />
              </div>
            </Col>
        </Row>
      </div>
    </div>

    <!-- 资质简介区 -->
    <div class="w" style="margin-top: 5px;">
      <div class="title-area">
        <span>资质简介</span>
      </div>
      <div class="content-area" style="padding-top: 15px;">
        <TextArea style="width: 100%; height: 300px;"  v-model="record.remark" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "app",
  data: function () {
    return {
      labelCol: { span: 8 },
      wrapperCol: { span: 15 },
      record: {}
    }
  },
  mounted: function () {
    this.record = this.$route.query.record;
    // console.log("this.record: ", this.record);
  },
  methods: {
    submit: function () {
      console.log("Submit...");
    },
    cancel: function () {
      this.$router.push('/manufacturerInfoMgr');
    }
  }
}
</script>

<style scoped>
  .w {
    /* height: 100%; */
    background-color: #F9FAFB;
  }

  /* 标题 */
  .title-area {
    height: 36px;
    background-color: #E9EBF0;
  }
  .title-area span {
    display: inline-block;
    font-weight: 500;
    line-height: 36px;
    margin-left: 15px;
  }

  /* 主体内容显示区 */
  .content-area {
    /* background-color: lightblue; */
    height: 100%;
    margin-left: 25px;
    margin-right: 25px;
    padding-bottom: 15px;
  }
  /* 基本信息区域 */
  .info-row {
    margin-bottom: 20px !important;
  }
  /* 查询表单区 */
  .form-area {
    /* background-color: lightcyan; */
    margin-left: 50px;
    margin-right: 50px;
  }
  .formGrid {
    /* background-color: orange; */
    margin-top: 15px;
    height: 35px;
    line-height: 35px;
  }

  .uni-divider {
    margin: 0;
  }

  /* 按钮区 */
  .button-area {
    margin-top: 15px;
    /* background-color: lightcyan; */
  }
  .button-area svg {
    margin-top: 3px;
    margin-right: 5px;
  }

  /* 列表区 */
</style>

